<template>
    <div>
        <!-- 操作 -->
        <el-button-group>
            <el-button type="warning" size="small"  @click=""
                ><el-icon><Plus /></el-icon> 添加</el-button
            >
            <el-button type="warning" size="small" @click=""
                ><el-icon><Refresh /></el-icon>刷新</el-button
            >
        </el-button-group>

        <!-- 角色列表 -->
        <el-table :data="roleList" border stripe>
            <el-table-column prop="id" label="序号" width="80" />
            <el-table-column prop="role" label="权限" />
            <el-table-column prop="description" label="描述" />

            <el-table-column label="操作">
                <template #default="scope">
                    <!-- <el-button size="small" @click="bindAuthMenu(scope.row.r_id)" -->
                    <div class="btnBoxF4">
                        <el-button
                            size="small"
                            type="warning"
                            @click="bindAuthMenu(scope.row.role_id)"
                            >权限管理</el-button
                        >
                        <el-button
                            size="small"
                            type="success"
                            @click="bindResourceMenu(scope.row.role_id)"
                            >资源权限</el-button
                        >
                        <!-- <el-button size="small" @click="bindEditRoleForm(scope.row)" -->
                        <el-button
                            size="small"
                            type="primary"
                            @click="bindEditRole(scope.row.role_id)"
                            >编辑</el-button
                        >
                        <el-button size="small" type="danger" :disabled="true" @click=""
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 权限管理 -->
        <el-drawer
            v-model="disableAuthMenuDrawer"
            title="权限设置"
            direction="rtl"
            :destroy-on-close="true"
        >
            <el-tree
                ref="menuTree"
                :data="menuList"
                show-checkbox
                node-key="id"
                :default-checked-keys="idList"
                default-expand-all
            ></el-tree>
            <el-button type="success" @click="onAuthMenu">确定</el-button>
        </el-drawer>
        <!-- 资源权限 -->
        <el-drawer
            v-model="disableResourceMenuDrawer"
            title="资源设置"
            direction="rtl"
            :destroy-on-close="true"
        >
            <el-tree
                ref="menuTreeTwo"
                :data="resourceList"
                show-checkbox
                node-key="id"
                :default-checked-keys="idList2"
                default-expand-all
            ></el-tree>
            <el-button type="success" @click="onResourceMenu">确定</el-button>
        </el-drawer>
        <!-- 编辑 -->
        <el-dialog title="编辑" v-model="editDialog" width="50%">
        <el-form ref="routerFormRefC" label-width="80px" :model="editForm">
            <!-- :rules="rules" -->
            <el-form-item label="权限">
                <el-input v-model="editForm.role"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="editForm.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onEditRole">确定</el-button>
                <el-button type="primary" @click="closeEidt"
                    >关闭</el-button
                >
            </el-form-item>
        </el-form>
    </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

onMounted(() => {
    // getOperatorList()
    getSysRoleList()
    getRootMenuList()
    getResourceList()
})

const roleList = ref([])
const menuList = ref([])
const resourceList = ref([])
const menuTree = ref()
const menuTreeTwo = ref()

// 获取操作员列表 （废除）
// const getOperatorList = async () => {
//     const res = await axios({
//         method: 'get',
//         url: 'http://localhost:3000/operator/list',
//         //post请求参数使用data选项, get参数 params选项
//     })
//     const { code,info } = res.data
//     if (code === 1) {
//         roleList.value = info
//     }
// }
// 获取角色管理权限表
const getSysRoleList = async () => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/sys/allrole',
        //post请求参数使用data选项, get参数 params选项
    })
    const { code, info } = res.data
    if (code === 1) {
        roleList.value = info
    }
}
// 获取动态菜单列表
const getRootMenuList = async () => {
    // let roleId = localStorage.getItem('ROID')
    const res = await axios({
        method: 'get',
        // url: 'http://localhost:3000/sys/menu',
        // params:{
        //     roleId
        // }
        url: 'http://localhost:3000/sys/operator_menu',
        params: {
            id: 1,
        },
    })
    const { code, sysmenu } = res.data
    if (code === 1) {
        menuList.value = sysmenu
    }
}
// 获取资源菜单列表
const getResourceList = async () => {
    // let roleId = localStorage.getItem('ROID')
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/sys/allresource',
    })
    const { code, resource } = res.data
    if (code === 1) {
        resourceList.value = resource
    }
}
// 权限设置 右侧边栏
const disableAuthMenuDrawer = ref(false)
const bdId = ref(1)
let idList = ref([])
const bindAuthMenu = async (id) => {
    // console.log('设置菜单权限');
    console.log('id>>>', id) // 角色权限id
    let authList 
    let choseList = []
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/sys/operator_menu',
        params: {
            id,
        },
    })
    const { code, sysmenu } = res.data
    if (code === 1) {
        authList = sysmenu
        console.log('authList>>>',authList);
        authList.forEach(item=>{
            return choseList.push(item.id)
        })
        idList.value = choseList
        console.log('idList>>>',idList.value);
    }
    bdId.value = id
    disableAuthMenuDrawer.value = true
    // console.log(menuList.value);
}
/**
 * 设置菜单权限
 */
const onAuthMenu = async () => {
    let nodes = menuTree.value.getCheckedNodes()
    console.log('nodes>>>',nodes)
    nodes = nodes.map(item => item.id)
    const ids: string = nodes.join(',')
    // console.log('ids ', ids)

    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/operator_menu_update',
        data: {
            id: bdId.value,
            arrids: ids,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '设置成功!',
        })
        disableAuthMenuDrawer.value = false
    } else {
        ElMessage({
            type: 'danger',
            message: '设置失败!',
        })
    }
}
// 资源权限管理 右侧边栏
const disableResourceMenuDrawer = ref(false)
const idList2 = ref([])
const bindResourceMenu = async (id) => {
    console.log('id>>>', id) // 角色权限id
    let authList 
    let choseList = []
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/sys/resource',
        params: {
            id,
        },
    })
    const { code, resource } = res.data
    if (code === 1) {
        authList = JSON.parse(resource)
        // console.log('authList>>>',authList);
        idList2.value = authList
        // console.log('idList2>>>',idList2.value);
        // console.log('resourceList.value>>>',resourceList.value);
        let arr = []
        resourceList.value.forEach(item=>{
            idList2.value.map(item2=>{
                if(item2 == item.path) arr.push(item.id)
            })
        })
        idList2.value = arr
        console.log('idList2>>>',idList2.value);
    }
    bdId.value = id
    disableResourceMenuDrawer.value = true
    // console.log(resourceList.value);
}
/**
 * 设置资源权限
 */
const onResourceMenu = async () => {
    let nodes = menuTreeTwo.value.getCheckedNodes()
    nodes = nodes.map(item => item.id)
    console.log(nodes)
    const ids: string = nodes.join(',')
    console.log('ids ', ids)

    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/resource_update',
        data: {
            id: bdId.value,
            arrids: ids,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '设置成功!',
        })
        disableResourceMenuDrawer.value = false
    } else {
        ElMessage({
            type: 'danger',
            message: '设置失败!',
        })
    }
}
// 编辑弹框
const editDialog = ref(false)
const bindEditRole = id => {
    console.log('id>>>', id) // 角色权限id
    bdId.value = id
    editDialog.value = true
    // console.log(resourceList.value);
}
const closeEidt = ()=>{
    editDialog.value = false
}
/**
 * 编辑
 */
const editForm = ref({
    role:'',
    description:''
})
const onEditRole = async (id) =>{
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/role_update',
        data: {
            id:bdId.value,
            role:editForm.value.role,
            description:editForm.value.description,
        }
    })
    editDialog.value = false
    getSysRoleList()
}


</script>

<style lang="scss" scoped>
.btnBoxF4 {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
